<template>
	<view class="index-main">
		<view>
			<image class="img" src="/static/wobj_01.jpg" mode="widthFix"></image>
		</view>
		<view>
			<image class="img" src="/static/wobj_02.png" mode="widthFix"></image>
			<view class="box1">
				<view class="yqmbox">
					我的邀请码：6699DDCC <text @click="copy('123')">复制</text> 
				</view>
				<view class="bntse" @click="togglePopup('bottom', 'share')">
					<image  src="/static/wobj_03.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="mdisx">
			<image class="img" src="/static/wobj_04.png" mode="widthFix"></image>
			<view class="box2">
				<view class="listbox">
					<view class="sls1">名次</view>
					<view class="sls2">用户</view>
					<view class="sls3">邀请人数</view>
					<view class="sls4">奖励金额</view>
				</view>
				<view class="listnrbox">
					<view class="listnr">
						<view class="ls1">1</view>
						<view class="ls2" >心有阳光</view>
						<view class="ls3" >20</view>
						<view class="ls4" >689</view>
					</view>
					<view class="listnr">
						<view class="ls1">2</view>
						<view class="ls2" >少女如云</view>
						<view class="ls3" >15</view>
						<view class="ls4" >365</view>
					</view>
					<view class="listnr">
						<view class="ls1">3</view>
						<view class="ls2" >天使之梦</view>
						<view class="ls3" >12</view>
						<view class="ls4" >258</view>
					</view>
					<view class="listnr">
						<view class="ls1">4</view>
						<view class="ls2" >犹太人</view>
						<view class="ls3" >09</view>
						<view class="ls4" >198</view>
					</view>
					<view class="listnr">
						<view class="ls1">5</view>
						<view class="ls2" >同花顺女孩</view>
						<view class="ls3" >05</view>
						<view class="ls4" >163</view>
					</view>
				</view>
				<view class="dftw">
					此排行榜只显示前5名
				</view>
			</view>
		</view>
		<view class="mdisx mmtd">
			<image class="img" src="/static/wobj_05.png" mode="widthFix"></image>
			<view class="box3">
				<view class="textss">
				1.邀请人A可从一级好友B（B注册一年内）和二级好友C的年化出借额中获得不同合伙人级别对应返现比例的奖励。若一级好友B注册超过一年，则邀请人A的两级奖励停止发放。邀请人需完成银行存管账户开户方可收到返现奖励，奖励（保留两位小数）可直接提现。
				</view>
				<view class="textss">
				2.返现奖励逐月发放，散标将在好友还款日当日发放，智选服务在好友进入服务期限的次月当日发放，发放当日计算邀请人合伙人级别。
				</view>
				<view class="textss">
				3.Wool兼职可能会根据实际业务对活动规则进行优化调整，调整后的奖励将按照新活动规则进行奖励发放，在法律许可的合法范围内。
				</view>
				<view class="textss">
				本活动最终解释权归Wool兼职所有。
				</view>
			</view>
		</view>
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @click="tapfx(item)">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniPopup,
			uniIcons
		},
		data() {
			return {
				show: false,
				type: '',
				bottomData: [{
						text: '微信',
						icon: '/static/fx1.png',
						name: 'wx',
						provider: "weixin",
						scene: "WXSceneSession",
					},
					{
						text: '朋友圈',
						icon: '/static/fx2.png',
						name: 'wxs',
						provider: "weixin",
						scene: "WXSenceTimeline",
					},
					{
						text: '链接',
						icon: '/static/fx3.png',
						name: 'copy',
						provider: "copy",
					}
				]
			}
		},
		onLoad(event) {
			
		},
		onShow() {
			
		},
		methods: {
			togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			},
			tapfx(e){
				this.$refs['share'].close()
				
			    var title = '分享赚钱';
			    var miaoshu = '这里是分享内容信息';
			    var imgurl = 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png';
			    var url = 'https://www.baidu.com/';
			    
				if(e.name=='copy'){
					console.log(e.type+"-"+e.text)
					uni.setClipboardData({
							data:url,
							success() {
								uni.showToast({
									title: '链接复制成功,快去通知好友吧',
									duration:2000,
									icon:"none"
								})
							}	
						})
				}else{
					uni.share({
					    provider: e.provider,
					    scene: e.scene,
					    type: 0,
					    href: url,
					    title: title,
					    summary: miaoshu,
					    imageUrl: imgurl,
					    success: function (res) {
					        console.log(JSON.stringify(res));
					        uni.showToast({
					            title: '已分享',
					            duration: 2000
					        });
					    },
					    fail: function (err) {
					        var errrr = JSON.stringify(err);
					         console.log(errrr)
					    }
					});
				}
			   
			},
			oncop(val){
				uni.setClipboardData({
					data:val,
					success() {
						uni.showToast({
							title: '复制成功',
							duration:2000,
							icon:"none"
						})
					}	
				})
			},
			// 监听原生标题导航按钮点击事件
			onNavigationBarButtonTap(e) {
				const index = e.index
				uni.navigateTo({
					url: '/pages/user/yhq/yhq'
				})
			},
			copy(value){
			//uni.setClipboardData方法就是讲内容复制到粘贴板
			uni.setClipboardData({
			  data:value,//要被复制的内容
			  success:()=>{//复制成功的回调函数
				uni.showToast({//提示
				  title:'复制成功'
				})
			  }
			});
			}			
		}
	}
</script>

<style>
page{
	background: #fca256;
}
.index-main{
	padding-bottom: 80upx;
}
.img{
	width: 100%;
}
.mdisx{
	margin-top: 80upx;
}
.dftw{
	text-align: center;
	font-size: 24upx;
	color: #999;
	line-height: 80upx;
}
.mmtd{
	margin-bottom: 150upx;
}
.listbox{
	padding-top: 60upx;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	box-sizing: border-box;	
}
.listbox>view{
	font-size: 32upx;
	font-weight: bold;
	color: #666;
	text-align: center;
}
.listnr{
	width: 95%;
	margin: 0 auto;
	height: 70px;
	border-bottom: 2upx solid #fcd7b8;
}
.listnr>view{
	float: left;
}
.ls1{
	width: 15%;
	height: 70px;
	line-height: 70px;
	font-size: 30upx!important;
	color: #666;
	text-align: center;
}
.ls2{
	width: 35%;
	height: 70px;
	line-height: 70px;
	font-size: 30upx!important;
	color: #666;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space:nowrap;
	overflow: hidden;
}
.ls3{
	width: 25%;
	height: 70px;
	line-height: 70px;
	font-size: 30upx!important;
	color: #666;
	text-align: center;
}
.ls4{
	width: 25%;
	height: 70px;
	line-height: 70px;
	font-size: 30upx!important;
	color: #666;
	text-align: center;
}
.sls1{
	width: 15%;
	font-size: 30upx!important;
	color: #666;
	text-align: center;
}
.sls2{
	width: 35%;
	font-size: 30upx!important;
	color: #666;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space:nowrap;
	overflow: hidden;
}
.sls3{
	width: 25%;
}
.sls4{
	width: 25%;
}
.box1{
	width: 90%;
	height: 290upx;
	margin: 0 auto;
	margin-top: -54upx;
	background: #fff;
	border-radius: 18upx;
}
.box2{
	width: 90%;
	margin: 0 auto;
	margin-top: -48upx;
	background: #fff;
	border-radius: 18upx;
	padding-bottom: 10upx;
	box-sizing: border-box;
}
.bntse{
	text-align: center;
}
.bntse image{
	width: 240px;
}
.yqmbox{
	text-align: center;
	padding-top: 80upx;
	box-sizing: border-box;
	color: #7a4801;
	padding-bottom: 30upx;
}
.yqmbox text{
	color: #F17503;
	padding: 10upx 20upx;
	box-sizing: border-box;
	border-radius: 8upx;
}
.yqmbox text:active{
	background: rgba(0,0,0,0.05);
}
.box3{
	width: 90%;
	margin: 0 auto;
	margin-top: -48upx;
	background: #fff;
	border-radius: 18upx;
	padding-bottom: 60upx;
	box-sizing: border-box;
	padding-top: 60upx;
}
.textss{
	text-align: justify;
	text-align-last: left;
	padding: 0 40upx;
	font-size: 32upx;
	margin-bottom: 20upx;
	color: #666;
	box-sizing: border-box;
}
/* 底部分享 */
	.uni-share {
		background: #fff;
	}

	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}

	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}

	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33.3333%;
		box-sizing: border-box;
	}

	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80upx;
		height: 80upx;
		overflow: hidden;
		border-radius: 10upx;
	}

	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}

	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
